import React, { Component } from 'react';
import {request} from '../../../../network/request'
import {Toast , WingBlank ,WhiteSpace ,NavBar ,Icon} from 'antd-mobile'
import {Spin,Descriptions } from 'antd'
import news from '../../../../statics/img/news_a.svg'
import './pd.css'

class Peopledetail extends Component {
    state = { 
        people_detail : {},
        relateNews:{},
        isloading:true,
     }

    componentDidMount(){
        const { id } =this.props.match.params 
        request({
            url:`/people/${id}`
        }).then(res=>{
            console.log(res.data);
            if(res.code == 600) {
                Toast.info('登录失效，请重新登录',2,()=>{
                    this.setState({isloading:false})
                    this.props.history.push({pathname:'/main/login'})
                })
            }
            if(res.code == 200){
                this.setState({
                    isloading :false,
                    people_detail : res.data.people,
                    relateNews : res.data.relatedNews
                })
                console.log(this.state.people_detail);
                console.log(this.state.relateNews);
            }
        })
    }

    goback = ()=>{
        this.props.history.goBack()
    }

    gornews = (news)=>{
        console.log(news);
        this.props.history.push({pathname:"/main/home/people_news",state:{news}})
    }

    render() {
        
        const { people_detail:pd ,relateNews:rn ,isloading} =this.state
        return ( 
        <div>
             <NavBar
                mode="light"
                icon={<Icon type="left" />}
                onLeftClick={this.goback}
                
                rightContent={[
                    <div onClick={()=>this.gornews(rn)}>
                        <img src={news}  style={{ height: '20px'}} />
                        <span style={{fontSize:'10px'}}>相关新闻</span>
                    </div>
                 
                    
                  ]}
                >人物详情
            </NavBar>
            <Spin spinning={isloading}>
            <div className='people-detail' >
                <div className='people-detail-img'>
                    <img src={pd.picture} alt={pd.name}></img>
                </div>

                

                

                <WingBlank>
                    <WhiteSpace/>
                <Descriptions  bordered column={{ xxl: 4, xl: 3, lg: 3, md: 3, sm: 2, xs: 1 }} size='small'>
                    <Descriptions.Item label="基本信息">{pd.info}</Descriptions.Item>
                    <Descriptions.Item label="英文名">{pd.name}</Descriptions.Item>
                    <Descriptions.Item label="身份">{pd.identity}</Descriptions.Item>
                    <Descriptions.Item label="职业">{pd.job}</Descriptions.Item>
                    
                    <Descriptions.Item label="联系地址" >{pd.address}</Descriptions.Item>
                    <Descriptions.Item label="所属协会/社团" >{pd.association} </Descriptions.Item>
                    <Descriptions.Item label="著作">{pd.book}</Descriptions.Item>
                    <Descriptions.Item label="学历背景">{pd.education}</Descriptions.Item>
                    <Descriptions.Item label="学术经历">{pd.experience}</Descriptions.Item>
                    <Descriptions.Item label="政治背景">{pd.party}</Descriptions.Item>
                    <Descriptions.Item label="所在院校">{pd.school}</Descriptions.Item>
                    <Descriptions.Item label="推特">{pd.twitter}</Descriptions.Item>
                    <Descriptions.Item label="其他信息">{pd.other}</Descriptions.Item>
                </Descriptions>
                </WingBlank>
                {/* <div>其他：{pd.other}</div> */}
                
              
              
               
            </div>
            </Spin> 

            
            
        </div> );
    }
}
 
export default Peopledetail;